<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Expires" content="0">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-control" content="no-cache,must-revalidate">
    <meta http-equiv="Cache" content="no-cache">
    <title>抽奖模拟器</title>
    <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/mdui@1.0.1/dist/css/mdui.min.css" />
</head>

<body class="mdui-appbar-with-toolbar">

    <div class="mdui-appbar mdui-appbar-fixed mdui-color-teal">
        <div class="mdui-toolbar">
            <button mdui-drawer="{target: '#drawer',overlay:true}" class="mdui-btn mdui-btn-icon"><i class="mdui-icon material-icons">menu</i></button>
            <a href="index.html" class="mdui-typo-headline">抽奖模拟器</a>
            <a href="javascript:;" class="mdui-typo-title mdui-hidden-sm mdui-hidden-xs"><small>今天也是非气满满呢^_^</small></a>
            <div class="mdui-toolbar-spacer"></div>
            <a href="https://github.com/zhengfan2014" target="_blank"
                class="mdui-btn mdui-btn-icon mdui-ripple mdui-ripple-white" mdui-tooltip="{content: '作者：zhengfan2014'}">
                <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
                    xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 36 36"
                    enable-background="new 0 0 36 36" xml:space="preserve" class="mdui-icon"
                    style="width: 24px;height:24px;">
                    <path fill-rule="evenodd" clip-rule="evenodd" fill="#ffffff" d="M18,1.4C9,1.4,1.7,8.7,1.7,17.7c0,7.2,4.7,13.3,11.1,15.5
	c0.8,0.1,1.1-0.4,1.1-0.8c0-0.4,0-1.4,0-2.8c-4.5,1-5.5-2.2-5.5-2.2c-0.7-1.9-1.8-2.4-1.8-2.4c-1.5-1,0.1-1,0.1-1
	c1.6,0.1,2.5,1.7,2.5,1.7c1.5,2.5,3.8,1.8,4.7,1.4c0.1-1.1,0.6-1.8,1-2.2c-3.6-0.4-7.4-1.8-7.4-8.1c0-1.8,0.6-3.2,1.7-4.4
	c-0.2-0.4-0.7-2.1,0.2-4.3c0,0,1.4-0.4,4.5,1.7c1.3-0.4,2.7-0.5,4.1-0.5c1.4,0,2.8,0.2,4.1,0.5c3.1-2.1,4.5-1.7,4.5-1.7
	c0.9,2.2,0.3,3.9,0.2,4.3c1,1.1,1.7,2.6,1.7,4.4c0,6.3-3.8,7.6-7.4,8c0.6,0.5,1.1,1.5,1.1,3c0,2.2,0,3.9,0,4.5
	c0,0.4,0.3,0.9,1.1,0.8c6.5-2.2,11.1-8.3,11.1-15.5C34.3,8.7,27,1.4,18,1.4z"></path>
                </svg>
            </a>

        </div>
    </div>
    <div class="mdui-row">
        <div class="mdui-col-sm-2">
        </div>
        <div class="mdui-col-sm-8">



            <div class="mdui-container-fluid">
                <div id="el">
                    <div class="mdui-drawer mdui-drawer-close mdui-drawer-full-height mdui-color-white" id="drawer">
  <ul class="mdui-list">
    <li class="mdui-list-item mdui-ripple" @click="show('home')">
      <i class="mdui-icon material-icons" style="margin:0 10px">videogame_asset</i>
      <div class="mdui-list-item-content">首页</div>
    </li>
    <li class="mdui-subheader">游戏</li>
    <li v-for="(game,index) in jsonList" class="mdui-list-item mdui-ripple" @click="show(index)">
    <div class="mdui-list-item-avatar"><img :src="game.Avatar"/></div>
    <div class="mdui-list-item-content">{{game.Name}}</div>
  </li>

    
    <li class="mdui-subheader">工具</li>
    <a href="qiyuan.html" class="mdui-list-item mdui-ripple">
      <i class="mdui-icon material-icons" style="margin:0 10px">videogame_asset</i>
      <div class="mdui-list-item-content"> 祈愿计算器</div>
    </a>

  </ul>
</div>
                <h1 v-bind:class="{'mdui-hidden':isGame}">简介</h1>
                <img v-bind:class="{'mdui-hidden':isGame}" class="mdui-img-fluid" src="card.jpg" />
                

                <br>
                <br>

                <h1 v-bind:class="{'mdui-hidden':isHome}">模板</h1>

                
                    <div v-bind:class="{'mdui-hidden':isHome}" class="timuList">
                        <ul class="mdui-list">
                            <li class="mdui-list-item mdui-ripple timu" v-for="i in jsonList[isGameId].List"
                                @click='goNext(i.id,i.file)'>

                                <i class="mdui-list-item-avatar mdui-icon material-icons">card_giftcard</i>
                                <div class="mdui-list-item-content">
                                    <div class="mdui-list-item-title">{{i.name}}</div>
                                    <div class="mdui-list-item-text mdui-list-item-one-line">{{i.describe}}</div>
                                </div>

                            </li>

                        </ul>
                        <div v-if="jsonList[isGameId].List==undefined" style="padding:24px;text-align:center;"><img src="img/error.png" /><br>404 未找到</div>
                        <br>
                        <br>


                    </div>
                </div>
            </div>


        </div>
        <div class="mdui-col-sm-2">
        </div>
    </div>



    <style>
        .doc-footer-nav-text {
            box-sizing: border-box;
            display: inline-block;
            font-size: 20px;
            font-weight: 500;
            -webkit-font-smoothing: antialiased;
            height: 100%;
            line-height: 24px;
            padding-top: 24px;
            width: 100%;
            text-align: center;
        }

        .doc-footer-nav-text .doc-footer-nav-direction {
            font-size: 15px;
            line-height: 18px;
            margin-bottom: 1px;
            opacity: 0.55;
        }

        .doc-footer-nav {
            height: 130px;
        }
    </style>
    <div class="doc-footer-nav mdui-color-teal">
        <div class="mdui-container">
            <div class="mdui-row">
                <div class="doc-footer-nav-text">

                    <span class="doc-footer-nav-chapter">2021 抽奖模拟器</span>
                </div>
                <div class="doc-footer-nav-text">
                    <span class="doc-footer-nav-direction">最终解释权归 假面骑士02所有</span>
                </div>
            </div>
        </div>
    </div>






    <script src="js/public.js?version=1.0"></script>
    <script src="js/vue.min.js"></script>
    <script src="js/iview.min.js"></script>
    <script>
        const vue = new Vue({
            el: "#el",
            data: {
                jsonList: JSONList,
                isHome:true,
                isGame:false,
                isGameId:0
            },
            methods: {
                goNext: function (id, file) {
                    sessionStorage.id = id;
                    sessionStorage.file = file;
                    window.location.href = "./chou.html"
                },
                show:function(id){
                    
                    if(id=="home"){
                        this.isHome = true;
                        this.isGame = false;
                        //console.log(this.jsonList);
                    }else{
                        this.isHome = false;
                        this.isGame = true;
                        this.isGameId = parseInt(id);
                        console.log(this.jsonList[this.isGameId].List);
                    }
                },
                StringToBool:function(str){
                    if(str==='true' || str === 'True'){
                        return true
                    }
                    if(str==='false'||tsr==='False'){
                        return false
                    }
                }
            },
            created() {
                if(sessionStorage.isHome && sessionStorage.isGame && sessionStorage.isGameId){
                    this.isGameId = parseInt(sessionStorage.isGameId);
                    this.isHome = this.StringToBool(sessionStorage.isHome);
                    this.isGame = this.StringToBool(sessionStorage.isGame);
                }
                console.log(this.StringToBool('true'))
                console.log(isGameId)
                console.log(isGame)
                console.log(isHome)
            }
        })
    </script>
    <script src="//cdn.jsdelivr.net/npm/mdui@1.0.1/dist/js/mdui.min.js"></script>


</body>

</html>